{% extends "tj3/tj3.html" %}

{% block navigation %}
<script type="text/javascript">
	var chart;
	var table;
	var json_chart = new google.visualization.DataTable({{json_chart|safe}}, 0.6);		      	
	var json_table = new google.visualization.DataTable({{json_table|safe}}, 0.6);		
	
	function drawChart() {	
      	chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
      	chart.draw(json_chart, {
      		height:600,
      		title:'Earned Value Analysis',
      	});
	}
	
	function drawTable() {
		table = new google.visualization.Table(document.getElementById('table_div'));
		// Every time the table fires the "select" event, it should call your
		// selectHandler() function.
		google.visualization.events.addListener(table, 'select', selectHandler);  
  		table.draw(json_table, {showRowNumber: false, page:"enable",allowHtml:true});
  	}
	
	function selectHandler(e){
		var selection = table.getSelection();
		var str;
		
		for (var i=0; i < selection.length; i++) {
			var item=selection[i];
			if (item.row!=null && item.column!=null) { // select a cell
				str = json_table.getValue(item.row,item.column);
				
			}else if (item.row != null) { // select a row
				str = json_table.getValue(item.row,0);
			
			}else if (item.column != null) { // select a column
				str = json_table.getValue(0,item.column);
			}
		}
		//alert(window.location.href);
		
		// getValue(0,0) should be the task_id
		task_id=json_table.getValue(item.row,1);
		new_url = ['/mysite/tj3/budget/compare',{{project.id}},{{s1.id}},{{s2.id}},task_id,1,'{{type}}'].join('/');
		window.location.replace(new_url);
	}  	
	
	$(document).ready(function() {
		// Turn radio buttons into a button set
		$("#radio").buttonset();

		// Buttonset event function
		$("#radio :radio").change(function(){
			var new_type=$(this).attr('id');
			new_url = ['/mysite/tj3/budget/compare',{{project.id}},{{s1.id}},{{s2.id}},{{root}},1,new_type].join('/');			
			window.location.replace(new_url);
			
			//if ($("input[@name='rdio']:checked").val() == 'a')
				// Code for handling value 'a'
			//else if ($("input[@name='rdio']:checked").val() == 'b')
				// Code for handling value 'b'
			//else
				// Code for handling 'c'
		});
		
		drawTable();
		drawChart();
	});	
</script>

{% endblock navigation %}


{% block content  %} 

<div class="ui-state-highlight ui-corner-all">
	{% if my_parent %}
		<a href="{% url budget_compare project.id,s1.id,s2.id,my_parent.id,level,type %}">
		&laquo; {{my_parent}} &laquo;</a> / {{me}}
	{% else %}
		<a href="{% url budget_compare project.id,s1.id,s2.id,0,level,type %}">
		&laquo; {{project.name}} &laquo;</a> / {{me}}
	{% endif %}
</div>
        
<div class="float_right">{{eac_type}}</div>

<div id="chart_div"></div>

<div class="ui-state-highlight ui-corner-all">
	<span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
	You can zoom in any task by click on its row in the table.
</div>

<div id="table_div"></div>

<div>
	<h1 class="ui-state-highlight ui-corner-all">Go To</h1>
	<ul>
		<li><a href="{% url project_main_plan project.id %}">Project Planning</a>
		<li>
		Execution Central:
		<a href="{% url project_main_actual project.id,s2.id %}">
		<font color=blue>{{s2.name|capfirst}}</font></a>
		<li>
		<a href="{% url project_performance project.id, s2.id %}">
		Other Performance Monitors</a>
	</ul>
</div>

{% endblock content %}
